<template>
    <div>
        <h3>房型显示</h3>
        房型名称:
        <input type="text" v-model="can.houseTypeName">
        房型面积:
        <input type="text" v-model="can.sArea">- <input type="text" v-model="can.eArea">
        <input type="button" value="查询" @click="show">
        <input type="button" value="批量删除" @click="delAll">
        <input type="button" value="批量上架" @click="updStateAll(1)">
        <input type="button" value="批量下架" @click="updStateAll(0)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                    <td>房型Id</td>
                    <td>房型名称</td>
                    <td>图片</td>
                    <td>房型面积</td>
                    <td>是否有窗</td>
                    <td>入住人数</td>
                    <td>房型价格</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list">
                    <td><input type="checkbox" :value="item.id" v-model="ids"  @change="checkone"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.houseTypeName}}</td>
                    <td>
                        <img :src="item.photo" alt="" width="100" height="100">
                    </td>
                    <td>{{item.area}}</td>
                    <td>{{item.isWindow?"有窗":"无窗"}}</td>
                    <td>{{item.count}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.state?"上架":"下架"}}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.id)">
                        <input type="button" v-if="item.state==0" value="上架" @click="upd(item.id,1)">
                        <input type="button" v-if="item.state==1" value="下架" @click="upd(item.id,0)">
                    </td>
                </tr>
            </tbody>
        </table>

        <span>一共<b>{{ data.totalCount }}</b>行</span>
        <span>一共<b>{{  data.totalPage}}</b>页</span>
        <span>每页<b>{{can.pageSize }}</b>行</span>

        <select v-model="can.pageSize" @change="show">
            <option v-for="item in arr" :value="item" :key="item">每页显示{{ item }}行</option>
        </select>
        <span>一共<b>{{  can.pageIndex}}</b>页/<b>{{  data.totalPage}}</b>页</span>

        <input type="button" value="首页" @click="fenye(1)">
        <input type="button" value="上一页" @click="fenye(can.pageIndex-1)">

        <span v-for="item in data.totalPage" @click="fenye(item)">{{ item }}</span>

        <input type="button" value="下一页" @click="fenye(can.pageIndex+1)">
        <input type="button" value="尾页" @click="fenye(data.totalPage)">

        <input type="number"  v-model="can.pageIndex">
        <input type="button" value="跳转" @click="fenye(can.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const route=useRoute();
const router=useRouter();

onMounted(()=>{
    getlist();
})

const updStateAll=(state:any)=>{
    if(confirm("确认修改状态吗?")){
        axios({
            method:'put',
            url:'/api/House/HouseUpdState',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功");
                checked.value=false;
                ids.value=[];
                getlist();

            }
            else{
                alert("修改失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

const upd=(id:any,state:any)=>{
    if(confirm("确认修改状态吗?")){
        axios({
            method:'put',
            url:'/api/House/HouseUpdState',
            params:{
                ids:id,
                state:state,
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功");
                getlist();

            }
            else{
                alert("修改失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

const delAll=()=>{
    if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/House/HouseDel',
            params:{
                ids:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                checked.value=false;
                ids.value=[];
                getlist();

            }
            else{
                alert("删除失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}
const del=(id:any)=>{
    if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/House/HouseDel',
            params:{
                ids:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                getlist();

            }
            else{
                alert("删除失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

const show=()=>{
    can.pageIndex=1;
    getlist()
}




let checked=ref(false);
let ids=ref([]);
const checkone=()=>{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}

const checkAll=()=>{
    checked.value=!checked.value;
    if(checked.value==true)
    {
        ids.value=data.list.map((item:any)=>{
            return item.id;
        })
    }
    else{
        ids.value=[];
    }
}

const arr=ref([2,4,6,8]);
const fenye=(num:any)=>{
    can.pageIndex=num;
    getlist();
}

const can=reactive({
    pageIndex:1,
    pageSize:2,
    houseTypeName:'',
    sArea:'',
    eArea:'',
})
const data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/House/HouseShow',
      params:can,
    })
    .then(res=>{
        console.log(res);
        data.list=res.data.list
        data.totalCount=res.data.totalCount
        data.totalPage=res.data.totalPage
       
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>    